<template>
	<view class="setting-page">
		<!-- 设置内容 -->
		<view class="setting-content">
			<!-- 设置项列表 -->
			<!-- <view class="setting-section">
				<view class="setting-item" @click="navigateTo('/pages/mine/account')">
					<view class="item-left">
						<view class="item-icon">👤</view>
						<text class="item-title">账号与安全</text>
					</view>
					<view class="item-right">
						<text class="arrow">›</text>
					</view>
				</view>

				<view class="setting-item" @click="navigateTo('/pages/mine/general')">
					<view class="item-left">
						<view class="item-icon">⚙️</view>
						<text class="item-title">通用设置</text>
					</view>
					<view class="item-right">
						<text class="arrow">›</text>
					</view>
				</view>

				<view class="setting-item" @click="navigateTo('/pages/mine/notification')">
					<view class="item-left">
						<view class="item-icon">🔔</view>
						<text class="item-title">通知设置</text>
					</view>
					<view class="item-right">
						<text class="arrow">›</text>
					</view>
				</view>

				<view class="setting-item" @click="navigateTo('/pages/mine/privacy')">
					<view class="item-left">
						<view class="item-icon">🔒</view>
						<text class="item-title">隐私设置</text>
					</view>
					<view class="item-right">
						<text class="arrow">›</text>
					</view>
				</view>
			</view> -->

			<!-- 分隔线 -->
			<view class="divider"></view>

			<!-- 其他设置 -->
			<view class="setting-section">
				<!-- <view class="setting-item" @click="navigateTo('/pages/mine/storage')">
					<view class="item-left">
						<view class="item-icon">🗂️</view>
						<text class="item-title">存储空间</text>
					</view>
					<view class="item-right">
						<text class="storage-size">1.29 GB</text>
						<text class="arrow">›</text>
					</view>
				</view>

				<view class="setting-item" @click="navigateTo('/pages/mine/content')">
					<view class="item-left">
						<view class="item-icon">📝</view>
						<text class="item-title">内容编好调节</text>
					</view>
					<view class="item-right">
						<text class="arrow">›</text>
					</view>
				</view> -->

				<view class="setting-item" @click="navigateTo('/pages/address/index')">
					<view class="item-left">
						<view class="item-icon">📍</view>
						<text class="item-title">收货地址</text>
					</view>
					<view class="item-right">
						<text class="arrow">›</text>
					</view>
				</view>

				<!-- <view class="setting-item" @click="navigateTo('/pages/mine/components')">
					<view class="item-left">
						<view class="item-icon">🧩</view>
						<text class="item-title">添加小组件</text>
					</view>
					<view class="item-right">
						<text class="arrow">›</text>
					</view>
				</view>

				<view class="setting-item" @click="toggleYouthMode">
					<view class="item-left">
						<view class="item-icon">🔰</view>
						<text class="item-title">未成年人模式</text>
					</view>
					<view class="item-right">
						<text class="status-text">{{ youthMode ? '已开启' : '未开启' }}</text>
						<text class="arrow">›</text>
					</view>
				</view>

				<view class="setting-item" @click="navigateTo('/pages/mine/appManage')">
					<view class="item-left">
						<view class="item-icon">📱</view>
						<text class="item-title">应用下载管理</text>
					</view>
					<view class="item-right">
						<text class="arrow">›</text>
					</view>
				</view> -->
			</view>

			<!-- 分隔线 -->
			<view class="divider"></view>

			<!-- 帮助与客服 -->
			<!-- <view class="setting-section">
				<view class="setting-item" @click="navigateTo('/pages/mine/help')">
					<view class="item-left">
						<view class="item-icon">❓</view>
						<text class="item-title">帮助与客服</text>
					</view>
					<view class="item-right">
						<text class="arrow">›</text>
					</view>
				</view>

				<view class="setting-item" @click="navigateTo('/pages/mine/about')">
					<view class="item-left">
						<view class="item-icon">ℹ️</view>
						<text class="item-title">关于小红书</text>
					</view>
					<view class="item-right">
						<text class="arrow">›</text>
					</view>
				</view>
			</view> -->

			<!-- 底部操作区 -->
			<view class="bottom-actions">
				<!-- <view class="action-btn switch-btn" @click="switchAccount">
					<text class="btn-text">切换账号</text>
				</view> -->
				<view class="action-btn logout-btn" @click="logout">
					<text class="btn-text">退出登录</text>
				</view>
			</view>

			<!-- 底部协议链接 -->
			<view class="footer-links">
				<text class="link-text" @click="openAgreement('privacy')">《个人信息收集清单》</text>
				<text class="link-text" @click="openAgreement('thirdParty')">《第三方信息共享清单》</text>
				<text class="link-text" @click="openAgreement('service')">《小红书用户服务协议》</text>
				<text class="link-text" @click="openAgreement('privacy2')">《小红书用户隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import useUserStore from '@/store/modules/user'
	const userStore = useUserStore()

	// 响应式数据
	const youthMode = ref(false)

	// 页面导航
	const navigateTo = (url : string) => {
		uni.navigateTo({ url })
	}

	// 切换未成年人模式
	const toggleYouthMode = () => {
		youthMode.value = !youthMode.value
		uni.showToast({
			title: youthMode.value ? '已开启未成年人模式' : '已关闭未成年人模式',
			icon: 'none'
		})
	}

	// 切换账号
	const switchAccount = () => {
		uni.showModal({
			title: '切换账号',
			content: '确定要切换账号吗？',
			success: (res) => {
				if (res.confirm) {
					// 处理切换账号逻辑
					uni.showToast({
						title: '切换账号功能开发中',
						icon: 'none'
					})
				}
			}
		})
	}

	// 退出登录
	const logout = () => {
		uni.showModal({
			title: '退出登录',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					userStore.logOut().then(() => {
						uni.reLaunch({
							url: '/pages/register/wxRegister'
						});
					})
				}
			}
		})
	}


	// 打开协议页面
	const openAgreement = (type : string) => {
		uni.navigateTo({
			url: `/pages/agreement/agreement?type=${type}`
		})
	}
</script>

<style lang="scss" scoped>
	.setting-page {
		background: #f8f9fa;
		min-height: 100vh;
	}

	.setting-content {
		padding: 0;
	}

	.setting-section {
		background: #fff;
		margin-bottom: 20rpx;
	}

	.setting-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		border-bottom: 1rpx solid #f5f5f5;
		transition: background-color 0.2s;

		&:last-child {
			border-bottom: none;
		}

		&:active {
			background: #f8f9fa;
		}

		.item-left {
			display: flex;
			align-items: center;
			flex: 1;

			.item-icon {
				width: 48rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				margin-right: 24rpx;
			}

			.item-title {
				font-size: 32rpx;
				color: #333;
				font-weight: 400;
			}
		}

		.item-right {
			display: flex;
			align-items: center;
			gap: 16rpx;

			.storage-size {
				font-size: 28rpx;
				color: #999;
			}

			.status-text {
				font-size: 28rpx;
				color: #999;
			}

			.arrow {
				font-size: 32rpx;
				color: #ccc;
				font-weight: 300;
			}
		}
	}

	.divider {
		height: 20rpx;
		background: #f8f9fa;
	}

	.bottom-actions {
		padding: 40rpx 32rpx;
		background: #fff;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 24rpx;

		.action-btn {
			height: 88rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.2s;

			.btn-text {
				font-size: 32rpx;
				font-weight: 500;
			}

			&:active {
				transform: scale(0.98);
			}
		}

		.switch-btn {
			background: #f8f9fa;
			border: 1rpx solid #e5e5e5;

			.btn-text {
				color: #333;
			}
		}

		.logout-btn {
			background: #fff;
			border: 1rpx solid #e5e5e5;

			.btn-text {
				color: #333;
			}
		}
	}

	.footer-links {
		padding: 32rpx;
		background: #fff;
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx 32rpx;
		justify-content: center;

		.link-text {
			font-size: 24rpx;
			color: #999;
			text-decoration: underline;
			line-height: 1.5;
		}
	}
</style>